<template>
  <el-container class="parent">
    <Aside class="aside">
      <Lable-View
        @tableName="changeTable"
        @center="centerControl"
        :unitId="unitId"
        :key="labelKey"
      ></Lable-View>
    </Aside>
    <el-container class="parent-main">
      <header style="height: 100%">
        <Tag-View
          :tableName="tableName"
          :unitId="unitId"
          :key="tagKey"
        ></Tag-View>
      </header>
    </el-container>
  </el-container>
</template>

<script>
import Vue from 'vue'
import LableView from '@/views/commonView/LableView'
import Grid from '@/views/commonView/Grid'
import TagView from '@/views/commonView/TagView'
import router from '@/router'
import tree from '@/views/commonView/tree'
import { EventBus } from '@/components/AInitPage/ATableRadio/EventBus.js'
Vue.component('Lable-View', LableView)
Vue.component('Tag-View', TagView)
Vue.component('Grid', Grid)

export default {
  name: 'CommonMain',
  data () {
    return {
      tableName: '',
      boardId: '',
      unitId: '',
      labelKey: '124',
      tagKey: '123',
      restart: false,
      postData: {
        unitId: '',
        type: '1',
        pageNum: 1,
        pageSize: 15
      }
    }
  },
  methods: {
    changeTable: function (name) {
      // todo
      this.tableName = name

      // 把数据置空
      let param = {
        unitId: this.unitId,
        modelId: name,
        type: '1',
        pageNum: 1,
        pageSize: 15,
        textFields1: [{}],
        numberFields: [{}]
      }
      // 保存组件获取数据
      this.$http.post('/adhoc/dataUnits/dataUnitModify', param).then((res) => {
        // 通过修改key 的值来刷新组件
        this.tagKey = tree.UUID(16)
      })
    },
    // 进入仪表板
    centerControl: function () {
      router.push({
        name: 'PanelEdit',
        query: { unit: this.postData.modelId, boardId: this.boardId }
      })
    },
    handleChildEvent(res){
        this.tagKey = tree.UUID(16)
    }
  },
  mounted () {
      let data = this.$route.query
      if (data) {
      }
      let unitId = data.unitId
      this.boardId = data.boardId
      this.unitId = unitId
      this.tagKey = tree.UUID(16)
      this.labelKey = tree.UUID(16);
      //监听字段别名 、类型 、字典修改完成事件
      EventBus.$on('complete', this.handleChildEvent);
  },
    beforeDestroy() {
        // 组件销毁前，移除事件监听
        EventBus.$off('complete', this.handleChildEvent);
    },
}
</script>

<style scoped lang="less">
.parent {
  width: 100%;
  height: 100%;
  min-width: 800px;
  min-height: 500px;
}

.aside {
  position: relative;
  width: 20%;
  height: 100%;
  padding: 10px;
  background-color: white;
}
.parent-main {
  position: relative;
  width: 80%;
  height: 100%;
}
.parent-main header {
  width: 100%;
  height: 100%;
  min-height: 250px;overflow: hidden;
}

.grid {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px 10px 0 10px;
}
.draw {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px 10px 0 10px;
}
</style>
